import React, { useRef } from "react";
import Hello from "./components/Hello";

export default function App() {
  const helloRef = useRef();

  function handleClick() {
    console.log(helloRef.current);
  }

  return (
    <div>
      <h1>App</h1>
      <button onClick={handleClick}>获取Hello组件的实例</button>

      <hr />
      <Hello ref={helloRef} />
    </div>
  );
}

/**
 * ref的作用：
 *    1. 标记给普通元素，后续得到这个普通元素的DOM对象
 *    2. 标记给组件元素，后续得到这个组件的实例对象（this）
 *
 * 问题：
 *    1. ref 标记不能给函数式组件，因为函数式组件没有实例（没有this)
 */
